<template>
  <div class="box">
    <!-- 一级导航 -->
    <div class="top_nav_box">
      <div class="top_nav">
        <img src="https://b-gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt />
        <a href="#">首页</a>
        <a href="#">沸点</a>
        <a href="#">话题</a>
        <a href="#">小册</a>
        <a href="#">活动</a>
      </div>
    </div>
    <!-- 二级导航 -->
    <div class="nav_box_two">
      <ul class="navTwo">
        <a v-for="item in this.navData" :key="item.id" @click="check(item.id)">{{item.name}}</a>
      </ul>
    </div>
    <!-- 三级导航 -->
    <div class="nav_two_content" v-if="this.flag===1">
      <ul>
        <li style="background-Color:#007FFF; color:white">全部</li>
        <li v-for="i in this.navContent" :key="i.tagId" @click="check3(i.tagId)">{{i.title}}</li>
      </ul>
    </div>
    <tuijian :msg="navTuijian"></tuijian>
    <!-- <router-view/> -->
  </div>
</template>

<script>
import tuijian from "@/components/tuijian";
import axios from "axios";
export default {
  props: {},
  data() {
    return {
      // 二级导航标题
      navData: [],
      //三级导航
      navContent: [],
      //是否显示三级导航
      flag: 0,
      // 推荐文本
      navTuijian: [],
      // 二级导航id
      id2: ""
    };
  },
  computed: {},
  created() {},
  mounted() {
    // 二级导航数据
    this.navData = this.$store.state.navdata;
    console.log(this.navData);

    //推荐文本内容
    axios({
      method: "post",
      url: "https://web-api.juejin.im/query",
      data: {
        variables: { first: 20, after: "", order: "POPULAR" },
        extensions: { query: { id: "21207e9ddb1de777adeaca7a2fb38030" } }
      }
    })
      .then(res => {
        this.navTuijian = res.data.data.articleFeed.items.edges;
      })
      .catch(err => {
        console.log(err);
      });
  },
  watch: {
    navContent(v) {
      console.log(v);
    }
  },
  methods: {
    // 点击二级导航
    check(id) {
      // console.log(JSON.stringify(id));
      this.id2 = id;
      if (id) {
        this.flag = 1;
      } else {
        this.flag = 0;
      }
      // 三级导航
      axios({
        method: "post",
        url: "https://web-api.juejin.im/query",
        data: {
          variables: { category: id, limit: 15 },
          extensions: { query: { id: "801e22bdc908798e1c828ba6b71a9fd9" } }
        }
      })
        .then(res => {
          this.navContent = res.data.data.tagNav.items;
        })
        .catch(err => {
          console.log(err);
        });
      // 文本
      axios({
        method: "post",
        url: "https://web-api.juejin.im/query",
        data: {
          variables: {
            tags: [],
            category: id,
            first: 20,
            after: "",
            order: "POPULAR"
          },
          extensions: { query: { id: "653b587c5c7c8a00ddf67fc66f989d42" } }
        }
      })
        .then(res => {
          this.navTuijian = res.data.data.articleFeed.items.edges;
          // console.log(this.navTuijian);
          // vue.set(this.navTuijian, 0, 1);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 点击三级导航
    check3(id) {
      console.log(id);
      console.log(this.id2);

      axios({
        method: "post",
        url: "https://web-api.juejin.im/query",
        data: {
          variables: {
            tags: [id],
            category: this.id2,
            first: 20,
            after: ""
          },
          extensions: { query: { id: "653b587c5c7c8a00ddf67fc66f989d42" } }
        }
      })
        .then(res => {
          console.log(res);
          this.navTuijian = res.data.data.articleFeed.items.edges;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  components: {
    tuijian
  }
};
</script>

<style scoped >
.box {
  background-color: #f4f5f5;
}
.top_nav_box {
  width: 100%;
  height: 70px;
  background-color: #fff;
}
.top_nav {
  margin-left: 270px;
  display: flex;
  align-items: center;
}
.top_nav img {
  margin-right: 28px;
}
.top_nav a {
  margin: 20px;
  font-size: 17px;
}
a:hover {
  color: rgb(57, 163, 255);
}
.nav_box_two {
  width: 100%;
  height: 60px;
  position: relative;
  background-color: #fff;
  border: 0.5px solid rgb(224, 224, 224);
}
.navTwo {
  margin-left: 270px;
  display: flex;
  align-items: center;
}
.navTwo a {
  margin: 15px;
  font-size: 14px;
}
.nav_box_three {
  position: absolute;
  left: 20%;
}
.nav_box_three a {
  margin-left: 18px;
}
li {
  float: left;
  list-style: none;
}
.nav_two_content {
  width: 800px;
  margin-left: 270px;
  overflow: hidden;
}
.nav_two_content > ul > li {
  margin: 18px 0 0 15px;
  font-size: 13px;
  border: 1px solid rgb(218, 218, 218);
  color: #909090;
  background-color: #fff;
  border-radius: 20px;
  padding: 5px 8px;
}
</style>
